<script setup lang="ts">
import { PropType } from "vue";
import { Descriptions, DescriptionsSchema } from "@/components/Descriptions";

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => undefined,
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => [],
  },
});
const currentRows = ref(props.currentRow);

const tabs = ref([]);
const editableTabsValue = ref("");
const tabsInfo = ref([]);
const getInfo = async (code: string, key: string) => {
  const res = await "/historyRecordDetails/getHistoryRecordDetails".get({
    deviceCode: code,
    primaryKey: key,
    tabCode: "c_imported_components",
  });
  if (res.code == 200) {
    tabsInfo.value = res.data.recordList;
    if (res.data.missionList.length > 0) {
      editableTabsValue.value = res.data.missionList[0].missionCode;
      res.data.missionList.map((item) => {
        tabs.value.push({
          label: item.name + "/" + item.superiorExportTime,
          name: item.missionCode,
        });
      });
    }
    if (res.data.recordList.length > 0) {
      currentRows.value = {
        ...res.data.recordList[0],
        account: props.currentRow.account,
      };
    }
  }
};
const handleClick = (tab, event) => {
  currentRows.value = {
    ...tabsInfo.value[tab.index],
    account: props.currentRow.account,
  };
};
// 修复：监听 props.currentRow 的变化
watch(
  () => props.currentRow,
  (val) => {
    if (val && val.deviceCode) {
      getInfo(val.deviceCode, val.modelSpecification);
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <!-- <ContentWrap class="flex"> -->
  <el-tabs
   v-if="tabs.length > 0"
    tab-position="top"
    v-model="editableTabsValue"
    @tab-click="handleClick"
   >
    <el-tab-pane v-for="value in tabs" :label="value.label" :name="value.name">
      <Descriptions
        direction="vertical"
        :border="false"
        :schema="detailSchema"
        :data="currentRows || {}"
    /></el-tab-pane>
  </el-tabs>

  <Descriptions
  v-else
        direction="vertical"
        :border="false"
        :schema="detailSchema"
        :data="currentRows || {}"
    />
  <!-- </ContentWrap> -->
</template>
